<article>
    <h1><?php echo $GLOBALS['title'] ?></h1>
    <h2><a>CSS 概述</a></h2>
    <p>CSS (Cascading Style Sheet)，中文翻译为层叠样式表，  是用于控制网页样式并允许将样式信息与网页内容分离的一  种标记性语言。</p>
    <ul>
    	<li>样式定义如何显示 HTML 元素</li>
    	<li>样式通常存储在样式表中</li>
    	<li>把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题</li>
    	<li>外部样式表可以极大提高工作效率</li>
    	<li>外部样式表通常存储在 CSS 文件中</li>
    	<li>多个样式定义可层叠为一</li>
    </ul>
    <h2><a>CSS的写法</a></h2>
    <p>CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。</p>
    <pre><code><?php echo htmlspecialchars('selector {declaration1; declaration2; ... declarationN }') ?></code></pre>
    <p>下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。</p>
	<p>在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。</p>
	<pre><code><?php echo htmlspecialchars('h1 {color:red; font-size:14px;}') ?></code></pre>
	<h4>下面的示意图为您展示了上面这段代码的结构：</h4>
	<img src="__PUBLIC__/images/ct_css_selector.gif" alt="">
	<p><a>提示：</a>请使用花括号来包围声明。</p>
    <h2><a>如何创建 CSS</a></h2>
    <h3>外部样式表</h3>
    <p>当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <code><?php echo htmlspecialchars('<link> ') ?></code> 标签链接到样式表。<code><?php echo htmlspecialchars('<link> ') ?></code>标签在（文档的）头部：</p>
    <pre><code><?php echo htmlspecialchars('<link rel="stylesheet" type="text/css" href="mystyle.css" />') ?></code></pre>
    <h3>内部样式表</h3>
    <p>当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 code><?php echo htmlspecialchars('<style> ') ?></code> 标签在文档头部定义内部样式表，就像这样:</p>
    <pre><code><?php echo htmlspecialchars('
<style type="text/css">
	hr {color: sienna;}
	p {margin-left: 20px;}
	body {background-image: url("images/back40.gif");}
</style>') ?></code></pre>
	<h3>内联样式</h3>
	<p>由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。</p>
	<p>要使用内联样式，你需要在相关的标签内使用样式（<code>style</code>）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：</p>
	<pre><code><?php echo htmlspecialchars('
<p style="color: sienna; margin-left: 20px">
	This is a paragraph
</p>') ?></code></pre>
	<h3>导入样式</h3>
	<p>导入外部样式表文件</p>
	<pre><code><?php echo htmlspecialchars('@import url("global.css");') ?></code></pre>
	<h2><a>css注释</a></h2>
	<p>任何语言都有注释，当然CSS也不例外</p>
	<pre><code><?php echo htmlspecialchars('
<style type="text/css">
	h1{
		/*background: red*/
	}
</style>') ?></code></pre>
</article>
